<template>
    <div class="feedback-wrapper">
        <div class="feedback-box">
            <div class="feedback-title">
                <div class="title">{{feddinfo.nickname}} 点评</div>
                <div class="type" v-if="feddinfo.itype===0">酒店点评</div>
                <div class="type" v-else>服务建议</div>
            </div>
            <div class="feedback-start">
                <cell title="酒店点评">
                    <rater v-model="star" :min="min" star="☻" active-color="#FF9900" :margin="4" disabled></rater>
                    <span>{{rateing}}</span>
                </cell>
            </div>
            <div class="feedback-back">
                <div class="feedback-back-title">投诉建议</div>
                <textarea class="feedback-back-text" v-model="contents" disabled></textarea>
                <div class="feedback-back-img-box">
                    <div class="feedback-back-img" @click="icon(item)" v-for="(item,index) in imglist" :key="index">
                        <img class="feedback-back-style" :src="item">
                    </div>
                </div>
                <yd-popup v-model="show" position="center" width="90%">
                    <div class="show-box">
                        <img class="feedback-back-ico" :src="bigicon" @click="close()">
                    </div>
                </yd-popup>
            </div>
            <div class="feedback-feed">
                <div class="feed-title">回复</div>
                <textarea class="feedback-back-text" v-model="feed" placeholder="对于评价的回复~"></textarea>
                <div class="submit" @click="submit()" v-show="feddinfo.status!==1">提交</div>
            </div>
        </div>
    </div>
</template>

<script>
import apis from '../../../static/js/apis'
import {
  Rater,
  Group,
  Cell,
  Range,
  querystring
} from 'vux'
export default {
  components: {
    Rater,
    Group,
    Cell,
    Range,
    apis
  },
  data () {
    return {
      min: 1,
      star: '5',
      contents: '',
      show: false,
      feed: '',
      imglist: [],
      bigicon: '',
      feddinfo: {},
      id: '',
      userid: '',
      useridobj: {}
    }
  },
  computed: {
    rateing () {
      if (this.star === 5) {
        return '满意'
      } else if (this.star === 4) {
        return '较好'
      } else if (this.star === 3) {
        return '一般'
      } else if (this.star === 2) {
        return '较差'
      } else if (this.star === 1) {
        return '很差'
      }
    }
  },
  created () {
    this.useridobj = querystring.parse()
    this.userid = this.useridobj.wxuserinfoid
    this.id = this.useridobj.id
    this.$axios
      .post(apis + '/shenglian-fast/app/weixinapp/feedinfo', {
        id: this.id
      })
      .then(response => {
        if (response.status === 200) {
          this.feddinfo = response.data.feedinfo
          this.imglist = this.feddinfo.imgurl.split(',')
          this.feed = this.feddinfo.replycontent
          this.contents = this.feddinfo.contents
          this.star = parseInt(this.feddinfo.praise)
        } else {
          this.$dialog.toast({mes: '数据错误，请联系管理员', timeout: 1000})
        }
      })
      .catch(error => {
        console.log(error)
        this.$dialog.toast({mes: '服务器异常，稍后再试！', timeout: 1000})
      })
  },
  methods: {
    icon (item) {
      this.bigicon = item
      this.show = !this.show
    },
    close () {
      this.show = !this.show
    },
    submit () {
      if (this.feed !== '') {
        this.$axios
          .post(apis + '/shenglian-fast/app/weixinapp/replyfeed', {
            contents: this.feed,
            id: this.id,
            wxuserinfoid: this.userid
          })
          .then(response => {
            if (response.data.msg === 'success') {
              this.feddinfo.status = 1
              this.$dialog.toast({
                mes: '提交成功',
                timeout: 1000
              })
            } else {
              this.$dialog.toast({mes: '数据提交错误，请联系管理员', timeout: 1000})
            }
          })
          .catch(error => {
            console.log(error)
            this.$dialog.toast({mes: '服务器异常，稍后再试！', timeout: 1000})
          })
      } else {
        this.$dialog.toast({mes: '回复不能为空', timeout: 1000})
      }
    }
  }
}
</script>

<style scoped>
    .feedback-wrapper {
        position: fixed;
        width: 100%;
        bottom: 0;
        top: 0;
        left: 0;
        background: #fff;
        overflow: hidden;
    }
    .feedback-box {
        padding: 0px 20px;
        overflow: hidden;
    }
    .feedback-title {
        display: flex;
        width: 100%;
        border-bottom: 1px solid #d7d7d7;
        padding: 20px 0;
    }
    .title {
        font-size: 16px;
        flex: 1;
    }
    .type {
        font-size: 14px;
        flex: 1;
        text-align: right;
    }
    .weui-cell {
        padding: 15px 0;
        border-bottom: 1px solid #d7d7d7;
    }
    .weui-cell>>>.vux-label {
        font-size: 14px;
    }
    .weui-cell>>>.weui-cell__ft {
        font-size: 12px;
        margin-right: 20px;
    }
    /* .weui-cell >>> .vux-rater-box{
        font-size: 20px!important;
        margin-right: 2px!important;
        width: 20px!important;
        height: 20px!important;
    } */
    .weui-cell>>>.vux-rater {
        margin-right: 20px;
    }
    .feedback-back {
        padding: 15px 0;
    }
    .feedback-back-title {
        font-size: 14px;
    }
    .feedback-back-text {
        margin: 10px 0;
        width: 100%;
        height: 150px;
        overflow-y: auto;
        border: 1px solid #d7d7d7;
        font-size: 14px;
        padding: 10px;
        border-radius: 5px;
    }
    .feedback-back-img-box {
        width: 100%;
        overflow: hidden;
        display: block;
    }
    .feedback-back-img {
        width: 25%;
        height: 80px;
        overflow: hidden;
        float: left;
        margin-bottom: 10px;
        padding: 5px;
    }
    .feedback-back-style {
        width: 100%;
        height: 100%;
        border: 1px solid #d7d7d7;
        border-radius: 10px;
    }
    .show-box {
        background: #fff;
    }
    .feedback-back-ico {
        width: 100%;
        height: 100%;
    }
    .submit {
        width: 50%;
        margin: 20px auto;
        background: #92d4ef;
        color: #fff;
        height: 40px;
        line-height: 40px;
        font-size: 15px;
        text-align: center;
        border-radius: 5px;
    }
</style>
